<template>
  <div class="box">
    <el-col :xs="24" :sm="24" :lg="8">
      <el-card class="box-card">
        <Outside :imgUrl="require('@/assets/image/indexImg/type.png')" :title="'注册车辆类型分布'">
          <echartscom
            :echartObj="pieObj"
            :style="{width: '100%', height: '230px'}"
            class="pieclass"
          />
        </Outside>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="24" :lg="8">
      <el-card class="box-card">
        <Outside :imgUrl="require('@/assets/image/indexImg/static.png')" :title="'注册车辆统计'">
          <div class="registerCar">
            <echartscom
              :echartObj="pieThreeObj"
              :style="{width: '100%', height: '200px'}"
              class="pieclass"
            />
            <p class="bottom">注册车辆总数：{{registerCar.tolal}}</p>
          </div>
        </Outside>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="24" :lg="8">
      <el-card class="box-card">
        <Outside
          :imgUrl="require('@/assets/image/indexImg/ranking.png')"
          :title="'运单力度排名'"
          :company="'单'"
        >
          <echartscom :echartObj="categoryObj" :style="{width: '100%', height: '230px'}" />
        </Outside>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import echartscom from "./echartscom.vue";
import Outside from "./outside";
import echarts from "echarts";
import { getStatic, getRegister, getWaybillWeight } from "@/api/index.js";
export default {
  data() {
    return {
      type: [], //车辆类型名称
      typeNum: [], //车辆类型
      registerCar: {}, //注册车辆统计
      registerCarNum: [], //注册车辆百分比
      waybill: { name: [], value: [] }, //运单力度
      pieObj: {}, //饼图数据
      pieThreeObj: {}, //3个圆环数据
      categoryObj: {}, //长条跑道图数据
    };
  },
  components: {
    echartscom,
    Outside,
  },
  created() {
    this.getRegisterData();
    this.getStaticData();
    this.getWaybillWeightData();
  },
  methods: {
    //车俩类型接口
    getStaticData() {
      let that = this;
      getStatic()
        .then((response) => {
          if (response.code == 0) {
            that.type = [];
            that.typeNum = [];
            response.data.forEach((item) => {
              that.type.push(item.name);
              that.typeNum = [
                ...that.typeNum,
                { value: item.totol, name: item.name },
              ];
            });
            that.pieObj = {
              color: ["#1eaf44", "#ffd306", "#1270f1"],
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c} ({d}%)",
              },

              legend: {
                orient: "vertical",
                top: "center",
                right: "0",
                data: that.type,
              },
              series: [
                {
                  type: "pie",
                  radius: "65%",
                  center: ["40%", "50%"],
                  data: that.typeNum,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            };
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //车辆注册接口
    getRegisterData() {
      let that = this;
      getRegister()
        .then((response) => {
          if (response.code == 0) {
            that.registerCarNum = [];
            response.data[0].list.forEach((item) => {
              that.registerCarNum.push(
                ((item.tol / response.data[0].tolal) * 100).toFixed(2)
              );
            });
            that.registerCar = response.data[0];
            that.pieThreeObj = {
              title: [
                {
                  text: that.registerCarNum[0] + "%",
                  left: "16%",
                  top: "center",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "600",
                    color: "rgba(251, 200, 79, 1)",
                    textAlign: "center",
                  },
                },
                {
                  text: that.registerCar.list[0].city,
                  left: "16.5%",
                  bottom: "5%",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    color: "#000",
                    textAlign: "center",
                  },
                },
                {
                  text: that.registerCarNum[1] + "%",
                  left: "49%",
                  top: "center",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "600",
                    color: "rgba(232, 85, 63, 1)",
                    textAlign: "center",
                  },
                },
                {
                  text: that.registerCar.list[1].city,
                  left: "49.5%",
                  bottom: "5%",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    color: "#000",
                    textAlign: "center",
                  },
                },
                {
                  text: that.registerCarNum[2] + "%",
                  left: "82.5%",
                  top: "center",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "600",
                    color: "rgba(89, 180, 157, 1)",
                    textAlign: "center",
                  },
                },
                {
                  text: that.registerCar.list[2].city,
                  left: "82%",
                  bottom: "5%",
                  textAlign: "center",
                  textStyle: {
                    fontSize: "16",
                    color: "#000",
                    textAlign: "center",
                  },
                },
              ],
              series: [
                {
                  type: "pie",
                  radius: ["45%", "55%"],
                  center: ["17%", "50%"],
                  data: [
                    {
                      hoverOffset: 1,
                      value: that.registerCarNum[0],
                      itemStyle: {
                        color: "rgba(251, 200, 79, 1)",
                      },
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      hoverAnimation: false,
                    },
                    {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      value: 100 - that.registerCarNum[0],
                      hoverAnimation: false,
                      itemStyle: {
                        color: "rgba(251, 200, 79, .2)",
                      },
                    },
                  ],
                },

                {
                  type: "pie",
                  radius: ["45%", "55%"],
                  center: ["50%", "50%"],
                  data: [
                    {
                      hoverOffset: 1,
                      value: that.registerCarNum[1],
                      itemStyle: {
                        color: "rgba(232, 85, 63, 1)",
                      },
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      hoverAnimation: false,
                    },
                    {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      value: 100 - that.registerCarNum[1],
                      hoverAnimation: false,
                      itemStyle: {
                        color: "rgba(232, 85, 63, .2)",
                      },
                    },
                  ],
                },

                {
                  type: "pie",
                  radius: ["45%", "55%"],
                  center: ["83%", "50%"],
                  data: [
                    {
                      hoverOffset: 1,
                      value: that.registerCarNum[2],
                      itemStyle: {
                        color: "rgba(89, 180, 157, 1)",
                      },
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      hoverAnimation: false,
                    },
                    {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        normal: {
                          smooth: true,
                          lineStyle: {
                            width: 0,
                          },
                        },
                      },
                      value: 100 - that.registerCarNum[2],
                      hoverAnimation: false,
                      itemStyle: {
                        color: "rgba(89, 180, 157, .2)",
                      },
                    },
                  ],
                },
              ],
            };
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //运单统计
    getWaybillWeightData() {
      let that = this;
      getWaybillWeight()
        .then((response) => {
          if (response.code == 0) {
            that.waybill = { name: [], value: [] };
            response.data.forEach((item) => {
              that.waybill.name.push(item.areaName);
              that.waybill.value.push(item.uploadNum);
            });
            that.categoryObj = {
              grid: {
                left: "5%",
                right: "5%",
                 top:15,
                 bottom:0,
                 containLabel: true,
                 height:230
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                   type: "shadow", 
                },
                formatter: function (params) {
                  return (
                    params[0].name +
                    "<br/>" +
                    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                    params[0].value
                  );
                },
              },
              xAxis: {
                show: false,
                type: "value",
              },
              yAxis: [
                {
                  type: "category",
                  inverse: true, 
                  axisLabel: {
                    show: true,
                    margin:40,
                    interval: 'auto',
                    textStyle: {
                      color: "#000",
                      fontSize: "14"
                    },
                  },
                  splitLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                  },
                  data: that.waybill.name
                },
                
              ],
              series: [
                {
                  type: "bar",
                  zlevel: 1,
                  label: {
                    show: true,
                    position: "right", //每一条的数据位置
                  },
                  itemStyle: {
                    normal: {
                      barBorderRadius: 30,
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: "rgb(11,106,223,1)",
                        },
                        {
                          offset: 1,
                          color: "rgb(101,188,233,1)",
                        },
                      ]),
                    },
                  },
                   barWidth: 10,
                  data: that.waybill.value,
                },
              ],
            };
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  font-size: 14px;
  .el-col {
    box-sizing: border-box;
  }
  .box-card {
    width: 100%;
  }
  .el-card__body {
    width: 100%;
  }
  .el-col:nth-child(1) {
    padding-right: 6px !important;
  }
  .el-col:nth-child(2) {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }
  .el-col:nth-child(3) {
    padding-left: 6px !important;
  }

  p {
    margin: 0;
  }
  .registerCar {
    width: 100%;
    height: 230px;
    .bottom {
      width: 100%;
      text-align: left;
      height: 30px;
      line-height: 30px;
      font-size:16px;
    }
  }
}
@media screen and (max-width: 1200px) {
  .box-card {
    margin-bottom: 10px;
  }
  .box {
    border: none;
    .el-col:nth-child(1) {
      padding-right: 12px !important;
    }
    .el-col:nth-child(2) {
      padding-right: 12px !important;
      padding-left: 12px !important;
    }
    .el-col:nth-child(3) {
      padding-left: 12px !important;
    }
  }
}
.box:last-child {
  border: none;
}
</style>